//
//  ContentView.swift
//  DesignCode
//
//  Created by Mithun x on 7/11/19.
//  Copyright © 2019 Mithun. All rights reserved.
//

import SwiftUI

struct ContentView: View {

   @State var show = false
   @State var viewState = CGSize.zero

   var body: some View {
      ZStack {
         BlurView(style: .systemMaterial)

         TitleView()
            .blur(radius: show ? 20 : 0)
            .animation(.default)

//         CardBottomView()
//            .blur(radius: show ? 20 : 0)
//            .animation(.default)

        VStack {
            ZStack {
                CardView(text1: "员工编号", text2: "员工姓名")
                    .background(show ? Color.red : Color("background9"))
                    .cornerRadius(10)
                    .shadow(radius: 20)
                    .offset(x: 0, y: show ? -400 : -40)
                    .scaleEffect(0.85)
                    .rotationEffect(Angle(degrees: show ? 15 : 0))
                    .blendMode(.hardLight)
                    .animation(.easeInOut(duration: 0.6))
                    .offset(x: viewState.width, y: viewState.height)
                CardView(text1: "员工部门", text2: "员工职务")
                    .background(show ? Color("background5") : Color("background8"))
                    .cornerRadius(10)
                    .shadow(radius: 20)
                    .offset(x: 0, y: show ? -200 : -20)
                    .scaleEffect(0.9)
                    .rotationEffect(Angle(degrees: show ? 10 : 0))
                    .blendMode(.hardLight)
                    .animation(.easeInOut(duration: 0.4))
                    .offset(x: viewState.width, y: viewState.height)

                 CertificateView()
                    .offset(x: viewState.width, y: viewState.height)
                    .scaleEffect(0.95)
                    .rotationEffect(Angle(degrees: show ? 5 : 0))
                    .animation(.spring())
                    .onTapGesture {
                       self.show.toggle()
                    }
                    .gesture(
                       DragGesture()
                          .onChanged { value in
                             self.viewState = value.translation
                             self.show = true
                          }
                          .onEnded { _ in
                             self.viewState = CGSize.zero
                             self.show = false
                          }
                    )
            }
            Button(action: {  }) {
               CircleButton(icon: "house")
               Text("我的请假申请")
                .font(.none)
            }
            Button(action: {  }) {
               CircleButton(icon: "house.circle")
               Text("我的打卡记录")
            }
            Button(action: {  }) {
               CircleButton(icon: "house.circle.fill")
               Text("我的工资记录")
            }
        }

      }
   }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
      ContentView()
   }
}
#endif

struct CardView: View {
    var text1 = "员工编号："
    var text2 = "员工姓名："
    init(text1: String, text2: String) {
        self.text1 = text1
        self.text2 = text2
    }
    var body: some View {
       return VStack {
        Text(self.text1)
        Text(self.text2)
       }
       .frame(width: 340.0, height: 220.0)
    }
}

struct CertificateView: View {

   var item = Certificate(title: "User Info", image: "Certificate1", width: 340, height: 220)

   var body: some View {
      return VStack {
         HStack {
            VStack(alignment: .leading) {
               Text(item.title)
                  .font(.headline)
                  .fontWeight(.bold)
                  .foregroundColor(Color("accent"))
                  .padding(.top)
                

               Text("Name:")
                  .foregroundColor(.white)
            }
            Spacer()

            Image("Logo")
               .resizable()
               .frame(width: 30, height: 30)
         }
         .padding(.horizontal)
         Spacer()

         Image(item.image)
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .offset(y: 50)
      }
      .frame(width: CGFloat(item.width), height: CGFloat(item.height))
      .background(Color.black)
      .cornerRadius(10)
      .shadow(radius: 10)
   }
}

struct TitleView: View {
   var body: some View {
      return VStack {
         HStack {
            Text("个人信息")
               .font(.largeTitle)
               .fontWeight(.heavy)

            Spacer()
         }
         Image("Illustration5")

         Spacer()
      }.padding()
   }
}

struct CardBottomView: View {
   var body: some View {
      return VStack(spacing: 20.0) {
         Rectangle()
            .frame(width: 60, height: 6)
            .cornerRadius(3.0)
            .opacity(0.1)

         Text("This certificate is proof that Mithun has achieved UI Design course with approval from a Design+Code instructor.")
            .lineLimit(nil)

         Spacer()
      }
      .frame(minWidth: 0, maxWidth: .infinity)
      .padding()
      .padding(.horizontal)
      .background(BlurView(style: .systemMaterial))
      .cornerRadius(30)
      .shadow(radius: 20)
      .offset(y: UIScreen.main.bounds.height - 215)
   }
}

